<template>
  <div class="article-list">
    <p class="department-title">科室医生信息:</p>
    <van-cell center :title="item.name" value="挂号" v-for="(item,index) in Doctorlist" :key="index">
      <p slot="label">编号:{{item.number}}</p>
      <p slot="label">类型:{{item.level}}</p>
      <p slot="label">电话:{{item.phone}}</p>
      <van-button type="primary" @click="onEdit(0)">挂号</van-button>
     </van-cell>

    <!-- 挂号信息弹出层 -->
    <van-popup v-model="showBookMessage" round position="bottom" :style="{ height: '70%' }" >
      <p class="pop-title">确认信息</p>
      <van-cell-group>

        <!-- <van-field v-model="Doctorlist[Doctorindex].number" label="医生编号" placeholder="请输入用户名" /> -->
        <van-field label="所挂科室" :value="Doctorlist[Doctorindex].departmentName" readonly />
        <van-field label="医生编号" :value="Doctorlist[Doctorindex].number" readonly />
        <van-field label="医生姓名" :value="Doctorlist[Doctorindex].name" readonly />
        <van-field label="电话号码" :value="Doctorlist[Doctorindex].phone" readonly />
        <van-field label="类型" :value="Doctorlist[Doctorindex].level" readonly />
        <van-field v-model="userList.name" label="病人姓名" placeholder="请输入用户名" />
        <van-field v-model="userList.sex" label="病人性别" placeholder="请输入用户名" />

        <div class="messageButton">
          <van-button color="#7232dd" plain @click="showBookMessage = false">重新选择</van-button>
          <van-button color="#7232dd" plain @click="btnBook">确认挂号</van-button>

        </div>
      </van-cell-group>

    </van-popup>
    <!-- <p>{{DepartmentID}}</p> -->
  </div>
</template>

<script>
// import { type } from 'os';
import { getDoctorList, userBookNumber } from '@/api/user'
import { mapState } from 'vuex'
// 局部注册dialog组件
import { Dialog } from 'vant'
export default {
  name: 'DoctorList',
  props: {
    DepartmentID: {
      type: [Number],
      require: true
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  data () {
    return {
      currentContact: {
        name: '张三',
        tel: '13000000000'
      },
      Doctorlist: {}, // 存储列表数据
      // 用户信息列表
      userList: [], // 病人信息
      showBookMessage: false, // 挂号信息弹出框
      Doctorindex: 0, // 点击的医生的索引
      bookNumber: false // 挂号加载框
    }
  },
  async created () {
    const { data: { data: res } } = await getDoctorList(this.DepartmentID)
    this.Doctorlist = res
    console.log(this.Doctorlist)
  },
  methods: {

    onEdit (index) {
      this.showBookMessage = true
      this.userList = this.userinfo
      this.Doctorindex = index
      console.log(index)
    },
    async btnBook () {
      // 如果登录则预约,未登录跳转到登录页
      // this.bookNumber = true
      if (this.userinfo) {
        const Doctorlist = this.Doctorlist
        const Doctorindex = this.Doctorindex
        const userList = this.userList
        try {
          //  点击确认挂号后将数据传到新的表里
          const res = await userBookNumber({
            docNumber: Doctorlist[Doctorindex].number,
            docName: Doctorlist[Doctorindex].name,
            docPhone: Doctorlist[Doctorindex].phone,
            docLevel: Doctorlist[Doctorindex].level,
            depName: Doctorlist[Doctorindex].departmentName,
            userName: userList.name,
            userSex: userList.sex,
            userId: userList.id
            // userId:userList.
          })
          console.log(this.userList)
          this.bookLoading()
          setTimeout(() => {
            this.$toast.success(res.data.data)
            this.showBookMessage = false
          // 跳转到计时页面
          }, 1000)
        } catch (error) {
          this.$toast.fail(error)
        }
      } else {
        Dialog.confirm({
          title: '温馨提示',
          message: '您还没有登录,请登陆后再点击预约'
        })
          .then(() => {
            this.$router.push('/login')
          })
          .catch(() => {
            // on cancel

          })
      }
    },
    // 加载挂号loading函数
    bookLoading () {
      this.$toast.loading({
        duration: 1000, // 持续展示 toast
        forbidClick: true,
        message: '挂号中'
      })
    }
  },
  computed: {
    ...mapState(['userinfo'])
  }
}
</script>

<style lang="less" scoped>
.article-list {
  height: 50vh;
  overflow-y: auto;
  .department-title {
  margin-top: 0px;
  }

}
.pop-title {
  display: inline-bloack;
  text-align: center;
  color: black;
}
.van-cell-group {
  top: 0px;
  position: relative;
  .messageButton {

    display: flex;
    margin-top: 20px;
    justify-content: space-around;
  }
}

</style>
